<template>
  <view class="container">
    <img class="img" :src="detail.image" alt="" />
    <view>{{ detail.name }}</view>
    <view
      >{{ detail.price }}
      <text>剩余数量:{{ detail.productNum }}</text>
    </view>
    <view>{{ detail.description }}</view>
    <rich-text :nodes="detail.richText"></rich-text>
    <u-modal
      :show="isShow"
      title="联系客服"
      :closeOnClickOverlay="true"
      @confirm="isShow = false"
      @close="isShow = false"
    >
      <view class="slot-content">
        <image
          class="service"
          :show-menu-by-longpress="true"
          src="@/static/image/service.jpg"
          alt=""
        />
      </view>
    </u-modal>
    <view class="goods-nav">
      <uni-goods-nav
        :fill="true"
        :options="options"
        :buttonGroup="buttonGroup"
        @click="navLeftClick"
        @buttonClick="buttonClick"
      />
    </view>
  </view>
</template>
  
  <script lang="ts" setup>
import { onMounted, ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getFindOneProduct } from "@/api/user";
import CustomerService from "@/components/CustomerService/index.vue";
import { collect } from "@/api/user";

import type { detail } from "./index";
const options = ref([
  {
    icon: "headphones",
    text: "客服",
  },
  {
    icon: "star",
    text: "收藏",
  },
  {
    icon: "cart",
    text: "购物车",
    info: 2,
  },
]);
const buttonGroup = ref([
  {
    text: "加入购物车",
    backgroundColor: "#ff0000",
    color: "#fff",
  },
  {
    text: "立即购买",
    backgroundColor: "#ffa200",
    color: "#fff",
  },
]);
const isShow = ref(false);

// 购物车左侧导航
const navLeftClick = (e) => {
  switch (e.index) {
    case 0:
      isShow.value = true;
      break;
    case 1:
      collectHandler();
      break;

    default:
      break;
  }
};
// 收藏
const collectHandler = () => {
  const data = {
    Pid: detail.value._id,
    Uid: uni.getStorageSync("userInfo")._id,
    isCollect: detail.value.isCollect ? false : true,
  };
  collect(data).then((res) => {});
};
const buttonClick = (e) => {
  console.log(e);
};
const detail = ref({});
// 获取详情信息
const getDetail = (_id: string) => {
  getFindOneProduct({ _id }).then((res) => {
    console.log(res);
    if (res.ActionType === "OK") {
      detail.value = res.data;
    }
  });
};

onLoad((options) => {
  console.log("参数", options);
  getDetail(options.id);
});

onMounted(() => {});
</script>
  
  <style lang="scss" scoped>
.container {
  padding-bottom: 70px;
  .img {
    width: 100%;
  }
  .goods-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
.slot-content {
  width: 100%;
  padding: 0 20px;
  .service {
    width: 100%;
  }
}
</style>